/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
<template>
  <el-dialog
    title="版本"
    v-if="closeDialog"
    :visible.sync="closeDialog"
    append-to-body
    custom-class="m-version"
  >
    <m-popover
      ref="popover"
      @ok="_ok"
    >
      <template slot="content">
        <div class="box">
          <el-table
            :data="list"
            size="mini"
            :header-cell-style="{background:'rgba(51,49,126,0.10)'}"
          >
            <el-table-column
              label="编号"
              type="index"
              width="80"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="version"
              label="版本"
            >
              <template slot-scope="scope">
                <div
                  class="current-version"
                  v-if="scope.row.isCurrent"
                >
                  {{ scope.row.version+' 当前版本' }}
                </div>
                <div v-else>
                  {{ scope.row.version }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="remark"
              label="描述"
            >
            </el-table-column>
            <el-table-column
              prop="creatTime"
              label="创建时间"
            >
            </el-table-column>
            <el-table-column
              label="操作"
              width="120"
            >
              <template slot-scope="scope">
                <el-tooltip
                  content="切换"
                  placement="top"
                  :enterable="false"
                >
                  <img
                    v-if="scope.row.isCurrent"
                    src="../svg/light-switch.svg"
                    style="width: 28px;height: 28px;margin-bottom: 3px;cursor:not-allowed;"
                  >
                  <img
                    v-else
                    src="../svg/switch.svg"
                    style="width: 28px;height: 28px;margin-bottom: 3px;"
                    @click="_switch(scope.row)"
                  >

                </el-tooltip>
                <el-tooltip
                  :content="$t('Delete')"
                  placement="top"
                  :enterable="false"
                >
                  <el-popconfirm
                    :disabled="scope.row.isCurrent"
                    :confirmButtonText="$t('Confirm')"
                    :cancelButtonText="$t('Cancel')"
                    icon="el-icon-info"
                    iconColor="red"
                    :title="$t('Delete?')"
                    @onConfirm="_delete(scope.row,scope.row.id)"
                  >
                    <el-button
                      type="danger"
                      size="mini"
                      icon="el-icon-delete"
                      circle
                      :disabled="scope.row.isCurrent"
                      slot="reference"
                    ></el-button>
                  </el-popconfirm>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page-box">
          <el-pagination
            background
            @current-change="_page"
            @size-change="_pageSize"
            :page-size="searchParams.pageSize"
            :current-page.sync="searchParams.pageNo"
            :page-sizes="[10, 30, 50]"
            layout="sizes, prev, pager, next"
            :total="total"
          >
          </el-pagination>
        </div>
      </template>
    </m-popover>
  </el-dialog>
</template>
<script>
  import mPopover from '@/module/components/popup/popover'
  export default {
    name: 'm-version',
    data () {
      return {
        closeDialog: false,
        item: null,
        total: 2,
        list: [
          {
            id: '1',
            version: 'V2.0',
            remark: '1',
            creatTime: '2023-10-21 04:53:22',
            isCurrent: 1
          },
          {
            id: '2',
            version: 'V1.0',
            remark: '1',
            creatTime: '2023-10-21 04:53:22',
            isCurrent: 0
          }
        ],
        isLoading: true,
        searchParams: {
          pageSize: 10,
          pageNo: 1,
        },
      }
    },
    props: {
      versionList: {
        type: Array,
        default: () => []
      }
    },
    methods: {
      show (item) {
        this.item = item
        this.closeDialog = true
      },
      _switch (row) {
        console.log('_switch')
      },
      _delete (row, id) {
        console.log('_delete:id', id)
      },
      _ok () {
        this.closeDialog = false
      },

    },

    components: { mPopover, }
  }
</script>
<style lang="scss" scoped>
/deep/.m-version {
  width: 750px !important;
  .el-button--default.el-button--mini.is-plain {
    display: none;
  }
  .box {
    padding: 10px;
  }
  .current-version {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 30px;
    border: 1px solid rgba(51, 49, 126, 0.4);
    background-color: rgba(51, 49, 126, 0.2);
    border-radius: 2px;
  }
}
</style>
